<template>
    <div class="todo-info">
        <span class="total">{{total}} item left</span>
        <div class="tabs">
            <a v-for="(item, index) in states" :class="[state === item ? 'actived' : '']"
               :key="index"
               @click="toggleState(item)"
            >{{item}}</a>
        </div>
        <button class="clear" @click="clearCompleted">Clear completed</button>
    </div>
</template>

<script>
    export default {
        name: "TodoInfo",
        data(){
            return {
                states:['all','active','completed'],
                state: 'all'
            }
        },
        methods : {
            toggleState(state){
                this.state = state;
                this.$emit('toggleState', state);
            },
            clearCompleted(){
                this.$emit('clearCompleted')
            }
        },
        props : {
            total: Number
        }
    }
</script>

<style lang="stylus" scoped>
    .todo-info {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        padding: 5px 10px;
        line-height: 30px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .total{
        color: #ff6740;
    }
    .tabs{
        display: flex;
        justify-content: space-between;
        width: 200px;
    }
    .tabs a{
        border: 1px solid #ff6740;
        border-radius: 5px;
        padding: 0 10px;
        cursor: pointer;
    }
    .actived{
        background-color: #ff6740;
        color: white;
    }
    .clear {
        padding: 0 10px;
        background-color: #0da9ff;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        appearance: none;
        border: none;
        outline: none;
    }
</style>